<template>
  <Page name="确认支付">
    <section>
      <div class="detail">
        <div class="total-box fxv-center">
          <div class="total fx">
            <div class="price flex">{{order.amount}}</div>
            <div class="currency">{{order.currency_code}}</div>
          </div>
          <div class="label">应付金额</div>
        </div>

        <div class="card">
          <div class="info fx fx-vc">
            <img src="~/assets/img/logo.png">
            <p class="flex">乐马国际会为您支付</p>
            <span>-0.00 {{order.currency_code}}</span>
          </div>
          <div class="tip">尊贵的{{user.level}}会员，基于您购买的商品和会员等级享受的益，乐马国际会将为您支付0%费用。</div>
        </div>
      </div>
      <div class="list-item mt20">
        <div class="item">
          <div class="left">剩余支付金额</div>
          <div class="right">{{order.amount}} {{order.currency_code}}</div>
        </div>
        <div class="item">
          <div class="left">订单信息</div>
          <div class="right">{{order.order_info}}</div>
        </div>
        <div class="item">
          <div class="left">付款方式</div>
          <div class="right">
            <div class="fx fx-vc fx-end" @click="showActionSheet = true">
              <span class="mr12">{{payTypeText}}</span>
              <i class="css-arrow-right"></i>
            </div>
          </div>
        </div>
      </div>

      <div class="btn-box">
        <button class="btn btn-primary btn-block" @click="submit">立即支付</button>
      </div>
    </section>

    <ActionSheet
      v-if="showActionSheet"
      title="选择优先支付方式"
      tip="优先使用所选付款方式,如付款失败将尝试使用其他付款方式完成付款"
      :list="pay_ids"
      :value="pay_id"
      @close="showActionSheet = false"
      @select="selectHandle" />

    <Keyboard
      v-if="showKeyboard"
      type="scan_pay"
      title="密码支付"
      label="请输入支付密码"
      :loading="posting"
      :params="{
        order_id:this.order.order_id,
        shop_id:this.order.shop_id,
        pay_type:this.pay_id,
      }"
      fieldname="pay_password" @success="success" @close="showKeyboard = false" />
  </Page>
</template>

<script>
  import Page from '~/components/page';
  import ActionSheet from '~/components/ActionSheet';
  import Keyboard from '~/components/Keyboard'

  export default {
    components: {
      Page,
      ActionSheet,
      Keyboard
    },
    validate({ query }) {
      // 如果userInfo , form为空，表示没有经过上一步操作非法进入页面
      return !!query.id;
    },
    async asyncData({ app, query,params, store}) {
      let order = {};
      let pay_ids = [];
      let pay_id = '1';

      try {
        //订单列表或者商品详情进来
        if(query.type == 'order' || query.type == 'detail'){
          //获取订单信息
          let url;
          let param;
          //如果是订单详情
          if(query.type == 'order'){
            url = '?ct=api&ac=order_detail'
            param = {
              order_id:query.id,
            }
          }else{
            url = '?ct=api&ac=create_order'
            param = {
              id:query.id
            }
          }

          let {
            data: rs
          } = await app.$axios.post(url, param)
          if (rs.code === 0) {
            const {data} = rs;
            if(query.type == 'order'){
              order = {
                amount:data.order_info.pay_amount,
                currency_code:data.order_info.currency_code,
                order_info:data.order_goods[0].goods_name,
                order_id:data.order_info.order_id,
                shop_id:data.shop_info.id,
                pay_type:data.order_info.pay_type
              }
            }else{
              order = data;
            }
          } else {
            app.$toast(rs.msg).then(() => {
              app.router.back();
            })
          }
        }else if(query.type == 'scan-pay'){ //扫码支付入口
          if(!params.data){
            app.router.back();
            return false;
          }
          order = params.data
        }

        //付款顺序
        // if(!pay_seq || !pay_seq.pay_ids){
        //每次都要获取扣费顺序
        await store.dispatch('GET_PAY_SEQ');
        // }

        let pay_seq = store.state.paySeq;

        //重组适合actionsheet的数组
        pay_ids = store.state.paySeq.pay_ids.map(item=>{
          let rs = {
            value:item.key,
            label:item.text,
          }
          if(item.status == '0'){
            rs.disabled = true;
            rs.disabledText = '暂未开通'
          }
          return rs
        })
        //获取第一个激活的选中状态
        let item = store.state.paySeq.pay_ids.find(item=>item.status == '1');
        if(item){
            pay_id = item.key
        }else{
          pay_id = order.pay_type
        }

        //如果是代人支付的情况下没有找人代付的选项
        let elsepay = !!query.elsepay;
        if(!elsepay){
          pay_ids = pay_ids.concat({
              type: 'link',
              link: "/elsepay",
              label: '找人代付',
            })
        }

      } catch (e) {
        app.$error(e);
      }

      return {
        pay_ids,
        pay_id,
        order
      }
    },
    data() {
      return {
        posting:false,
        showKeyboard: false,
        showActionSheet: false,
      }
    },
    computed:{
      user(){
        return this.$store.state.user
      },
      payTypeText(){
        let text = '';
        this.pay_ids.some(item=>{
          if(item.value == this.pay_id){
            text = item.label;
          }
        })
        return text
      }
    },
    methods: {
      submit() {
        if (this.showKeyboard) return false;
        this.showKeyboard = true;
        return false;
      },
      success(data) {
        this.$store.commit('pay/setStatus', data);
        this.$router.push('status');
      },
      selectHandle(item){
        if(item.link){
          this.$store.commit('elsepay/setForm',this.order);
        }else{
          this.pay_id = item.value
        }
      }
    }
  }

</script>

<style lang="less" scoped>
  .detail {
    padding: 0 30px 30px 30px;
    background-color: #fff;

    .total-box {
      height: 250px;

      .total {
        color: #292929;
        align-items: flex-end;
        max-width: 100%;

        .price {
          line-height: 1;
          font-size: 60px;
          text-align: right;
          .text-ellipsis();
        }

        .currency {
          flex-shrink: 0;
          flex-grow: 0;
          margin-left: 14px;
          font-size: 30px;
        }
      }

      .label {
        margin-top: 40px;
        font-size: 28px;
        color: #999;
      }
    }

    .card {
      padding: 26px 50px;
      background-color: #fff;
      border: 1px solid #edeef0;
      border-radius: 10px;

      .info {
        img {
          display: block;
          width: 48px;
          height: 48px;
        }

        p {
          margin: 0 20px;
          font-size: 32px;
          color: rgb(41, 41, 41);
          .text-ellipsis();
        }

        span {
          font-size: 32px;
          color: rgb(240, 85, 33);
          .text-ellipsis();

        }
      }

      .tip {
        margin-top: 26px;
        font-size: 24px;
        line-height: 36px;
        color: rgb(211, 155, 0);
      }
    }
  }

  .btn-box {
    margin: 60px 30px;
  }

  .list-item {
    .left {
      color: #292929;
      font-size: 32px;
    }

    .right {
      color: #292929;
      font-size: 30px;
    }
  }

</style>
